<template>
  <view>
    <!-- 1. 顶部Tab导航 -->
    <tabBanner 
      :list="tabs" 
      :current="activeIndex" 
      @onTabClick="tabClick"
    />

    <!-- 2. 内容滑动区域（与Tab联动） -->
    <swiper 
      class="home-swiper" 
      @change="changeSwiper" 
      :current="activeIndex"
    >
      <swiper-item v-for="(tab, index) in tabs" :key="index">
        <!-- 每个Tab对应的内容区域 -->
        <view class="tab-content">
          <!-- 渲染对应分类的新闻列表 -->
          <view v-for="(item, idx) in filterNewsByTab(tab)" :key="idx" style="margin: 10rpx;">
            <CustomTextView 
              :title="item.title" 
              :author="item.author" 
              :number="item.number" 
              :time="item.time"
              :isSticky="item.isSticky"
              :mode="item.newstype"
              :image="item.image"
            >
              <template v-slot:footer v-if="item.showSearch">
                <view class="slotcontent">
                  <text>搜索：</text>
                  <view class="borderbox"><text>今日金价</text></view>
                  <view class="borderbox"><text>精选好物</text></view>
                </view>
              </template>
            </CustomTextView>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import CustomTextView from '../../components/cardViewText.vue';
import tabBanner from '../../components/tabBanner.vue'; 
import newData from '../../Data/news.json';

export default {
  components: {
    CustomTextView,
    tabBanner // 注册组件
  },
  data() {
    return {
      datalist: [],
      tabs: ['要闻', '推荐', '关注流', '24小时', '娱乐', '桂林', '财经'], // 顶部导航列表
      activeIndex: 0 // 当前选中的Tab索引
    }
  },
  created() {
    this.datalist = newData.datalist;
  },
  methods: {
    // 1. Tab点击事件：切换到对应索引
    tabClick({ index }) {
      this.activeIndex = index;
    },
    // 2. Swiper滑动事件：同步Tab选中状态
    changeSwiper(e) {
      this.activeIndex = e.detail.current;
    },
    // 3. 根据当前Tab筛选对应的新闻数据
    filterNewsByTab(tab) {
      // 这里假设news.json的datalist中包含"tab"字段（需确保数据结构匹配）
      // 若没有，可根据实际逻辑调整（如默认显示全部/按分类筛选）
      return this.datalist.filter(item => item.tab === tab) || this.datalist;
    }
  }
}
</script>

<style>
.home-swiper {
  height: calc(100vh - 80rpx); /* 占满剩余高度 */
}
.tab-content {
  padding: 10rpx;
}
/* 原有样式保持不变 */
.slotcontent{
  display: flex;
  align-items: center;
  gap: 12rpx; 
  padding: 10rpx 0; 
}
.slotcontent text{
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}
.borderbox{
  border: 1rpx solid #ddd;
  border-radius: 8rpx; 
  padding: 8rpx 16rpx;
  background-color: #f8f8f8; 
}
.borderbox text{
  font-size: 26rpx;
  color: #666;
}
</style>